<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">
</head>
<body>
<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<div class="row">
    <div class="d-none d-md-block d-lg-block d-xl-block col-md-3 col-lg-3 col-xl-3 ml-2">
        <div id="defaultSideDiv">
            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-dark border-bottom pb-1">
                    <%--头像--%>
                    <div class="d-inline">
                        <img class="rounded-circle" src="${user.headimgurl}" width="48px" height="48px"
                             alt="用户头像">
                    </div>
                    <div class="d-inline">
                        <strong class="ml-2" style="vertical-align: top;">${user.nickname}</strong><br/>
                        <div style="clear: both"></div>
                    </div>
                    <span>ID:<a class="font-weight-light">${user.id}</a></span>
                </div>
                <div class="border-dark border-bottom">
                    <div class="d-flex">
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>关注</dt>
                                <dd>${user.followingusernum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>粉丝</dt>
                                <dd>${user.fannum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>经验</dt>
                                <dd>${user.jiyan}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="border-dark border-bottom">
                    <p>${user.slogan}</p>
                </div>
                <div class="pb-1">
                    <div class="d-flex my-1">
                        <div class="flex-fill text-center p-3 bg-dark"><a href="/blog-write" class="text-white">写文章</a></div>
                        <div class="flex-fill text-center p-3 bg-danger"><a href="/blog-all" class="text-white">管理文章</a></div>
                    </div>
                </div>
            </div>

            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-bottom border-dark" style="position:relative;">
                    <a class="font-weight-bold"><i class="fa fa-globe"></i> 关注领域</a>
                    <a href="/manageStarArea" class="text-muted" style="position:absolute;right:4px;">查看更多&gt;&gt;</a>
                </div>
                <div>
                    <c:forEach items="${userAreas}" var="userArea" end="5">
                        <div class="my-1">
                            <div class="text-left" style="position:relative;">
                                <img alt="图片" class="rounded-circle" src="${userArea.area.imgurl}"
                                     width="40px" height="40px"/>
                                <a><strong>${userArea.area.areaname}</strong></a>
                            </div>
                        </div>
                    </c:forEach>
                </div>
            </div>

            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-bottom border-dark" style="position:relative;">
                    <a class="font-weight-bold"><i class="fa fa-user-graduate"></i> 关注博主</a>
                    <a href="/manageStarUser" class="text-muted" style="position:absolute;right:4px;">查看更多&gt;&gt;</a>
                </div>
                <div>
                    <c:if test="${empty userFollows}">
                        <%--为空时，提示用户--%>
                        <p>您还没有关注任何人！</p>
                    </c:if>
                    <c:forEach items="${userFollows}" var="user" end="5">
                        <div class="my-1">
                            <div class="text-left" style="position:relative;">
                                <img alt="图片" class="rounded-circle" src="${user.followingUser.headimgurl}"
                                     width="40px" height="40px"/>
                                <a><strong>${user.followingUser.nickname}</strong></a>
                            </div>
                        </div>
                    </c:forEach>
                </div>


            </div>

            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-bottom border-dark" style="position:relative;">
                    <a class="font-weight-bold"><i class="fa fa-bookmark"></i> 收藏博客</a>
                    <a href="/manageStarBlog" class="text-muted" style="position:absolute;right:4px;">查看更多&gt;&gt;</a>
                </div>
                <div>
                    <c:if test="${empty starBlogs}">
                        <%--为空时，提示用户--%>
                        <p>您还没有收藏任何博客！</p>
                    </c:if>
                    <c:forEach items="${starBlogs}" var="starBlog" end="5">
                        <c:if test="${not empty starBlog.blog}">
                            <div class="my-1">
                                <div class="text-left">
                                    <p class="mb-0">☞<a class="text-dark" href="/blog/${starBlog.blog.id}">${starBlog.blog.blogtitle}</a></p>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </div>
        <%--做锚点使用，监听页面滚动--%>
        <div id="anchor"></div>
        <div id="sideDiv" class="col-md-3 col-lg-3 col-xl-3" style="display: none;position:fixed;">
            <div class="my-2 p-2 rounded shadow-sm bg-white">
                <div class="border-dark border-bottom pb-1">
                    <%--头像--%>
                    <div class="d-inline">
                        <img class="rounded-circle" src="${user.headimgurl}" width="48px" height="48px"
                             alt="用户头像">
                    </div>
                    <div class="d-inline">
                        <strong class="ml-2" style="vertical-align: top;">${user.nickname}</strong><br/>
                        <div style="clear: both"></div>
                    </div>
                    <span>ID:<a class="font-weight-light">${user.id}</a></span>
                </div>
                <div class="border-dark border-bottom">
                    <div class="d-flex">
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>关注</dt>
                                <dd>${user.followingusernum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>粉丝</dt>
                                <dd>${user.fannum}</dd>
                            </dl>
                        </div>
                        <div class="p-2 flex-fill pb-0">
                            <dl class="text-center">
                                <dt>经验</dt>
                                <dd>${user.jiyan}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="border-dark border-bottom">
                    <p>${user.slogan}</p>
                </div>
                <div class="pb-1">
                    <div class="d-flex my-1">
                        <div class="flex-fill text-center p-3 bg-dark"><a href="/blog-write" class="text-white">写文章</a></div>
                        <div class="flex-fill text-center p-3 bg-danger"><a href="/blog-all" class="text-white">管理文章</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
        <div class="my-2 rounded bg-white rounded p-4" style="position: relative;">
            <div id="area" data-areaId="${area.id}">
                <div style="position: relative;" class="border-bottom border-gray pb-1">
                    <a href="/question-home" class="btn btn-sm btn-primary text-white" style="position: absolute;top:6px;right:18px;">返回</a>
                    <h4>当前领域</h4>
                </div>
                <img class="float-left" src="${area.imgurl}" width="45px" height="45px" alt='area img' style="object-fit: cover;">
                <div><code><strong>${area.areaname}</strong></code>:&nbsp;&nbsp;${area.description}</div>
            </div>
        </div>
        <div id="blogs" class="my-2 card-columns"></div>
        <div id="pagenav"></div>
    </div>
</div>

<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    //获取HTML中的图片地址
    function getimgsrc(htmlstr) {
        var reg = /<img.+?src=('|")?([^'"]+)('|")?(?:\s+|>)/gim;
        var imgsrcArr = [];
        while (tem = reg.exec(htmlstr)) {
            imgsrcArr.push(tem[2]);
        }
        return imgsrcArr;
    }

    //过滤html标签
    function delHtmlTag(str) {
        return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
    }

    function buildPage(result) {
        var blogs=$("#blogs");
        blogs.empty();
        $.each(result.extend.pageInfo.list,function (index,item) {
            if (item) {
                var div_card = $("<div class='card'></div>");
                //判断该博客中是否包含图片
                var imgsrc = getimgsrc(item.blogcontent);
                if (imgsrc.length>0) {
                    //alert(imgsrc[0]);
                    //图片存在，card中插入图片
                    div_card.append($("<img class='card-img-top' alt='博客封面' src='"+imgsrc[0]+"' data-holder-rendered='true'/>"));
                }
                var div_body = $("<div class='card-body'>");
                var h5 = $("<h5 class='card-title'><a href='/blog/"+item.id+"' class='text-dark'>" + item.blogtitle + "</a></h5>");
                //内容截取，并去掉HTML标签
                var content = item.blogcontent;
                content = delHtmlTag(content);
                content = content.substr(0, 200);
                var p = $("<p class='card-text'>"+content+"</p>");
                var p_small = $("<p class='card-text'><small class='text-muted'>"+new Date(item.edittime).toLocaleString()+"</small></p>");
                //开始封装
                div_card.append(div_body.append(h5).append(p).append(p_small)).appendTo(blogs);
            }
        });
    }

    function buildPage_pagenav(result) {
        var pagenav = $("#pagenav");
        pagenav.empty();

        var div = $("<div class='p-2'>");
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if(result.extend.pageInfo.pageNum === item){
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function(){
                toPage(item);
            });
            ul.append(numLi);
        });
        div.append(ul).appendTo(pagenav);
    }

    function toPage(pn) {
        var areaId = $("#area").attr("data-areaId");
        $.ajax({
            url:'/getAllBlogsByAreaId/'+areaId+'/'+pn,
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    if (result.extend.pageInfo.list.length>0) {
                        buildPage(result);
                        buildPage_pagenav(result);
                    }else{
                        toastr.info("暂时没有该领域的文章！");
                    }
                }else{
                    toastr.error("请重新登录！！");
                }
            }
        });
    }

    $(function () {
        var anchorTop = document.getElementById("anchor").offsetTop;
        $(window).scroll(function() {
            //为了保证兼容性，这里取两个值，哪个有值取哪一个
            //scrollTop就是触发滚轮事件时滚轮的高度
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //如果页面滑动到指定距离
            if (scrollTop > anchorTop) {
                $("#defaultSideDiv").hide();
                $("#sideDiv").show();
            }else{
                $("#sideDiv").hide();
                $("#defaultSideDiv").show();
            }
        });

        toPage(1);
    });
</script>
</body>
</html>
